<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 后台管理 </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/layui.css" media="all">
    <link rel="stylesheet" href="css/common.css" />
    <script type="text/javascript" src="js/official/jquery.js"></script>
    <style>
    .layui-header {
        border-bottom: 1px solid #2B8CEE;
    }

    body {
         height: 100vh;
       
    }

    .header span {
        color: #fff;
    }

    

    .layui-side {
        background-color: #1777E2;
    }

    .bd {
        border: 1px solid #000;
    }
    .leftSide li{
        cursor: pointer;
        color:#fff;
        text-align: center;
        line-height:55px;
        font-size:15px;
     }
    .li_active{
        background-color:#fff!important;
        color: #2572EA!important;
    }
    
    
    </style>
    <script>
    ///^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
    </script>
</head>

<body class="layui-layout-body">
    <div id="LAY_app">
        <div class="layui-header">
            <div class="header">
                <div>
                    <img style="margin-top:10px;" src="images/logo2.png" width="70" height="70" alt="" />
                    <span>山西煤化有限公司</span>
                </div>
                <ul>
                    <li>
                        <a>
                          <i class="layui-icon layui-icon-about"></i>
                          <a>帮助</a>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="userlogin">Admin<i class="layui-icon layui-icon-triangle-d"></i></a>
                        <dl class="admin_item">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">修改密码</a></dd>
                             
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-layout layui-layout-admin  bd">
            <!-- 侧边菜单 -->
            <div class="layui-side layui-side-menu">
                 <ul class="leftSide">
                     <li class="li_active" name="main.html">视频监控</li>
                     <li name="home/report.html">实时数据</li>
                     <li name="home/control.html">远程管理</li>
                     <li name="home/tables.html">报表管理</li>
                     <li name="home/history.html">历史数据</li>
                     <li name="home/history.html">在线诊断</li>
                     <li name="home/history.html">报警系统</li>
                 </ul>
            </div>
            <!-- 主体内容 -->
            <div class="layui-body">
                <div class="layadmin-tabsbody-item layui-show">
                    <iframe src="main.html" frameborder="0" class="layadmin-iframe leftCont"></iframe>
                </div>
            </div>
            <!-- 辅助元素，一般用于移动设备下遮罩 -->
            <div class="layadmin-body-shade" layadmin-event="shade"></div>
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script>
    $(".admin_item").hide();
    $(".userlogin").click(function() {
        $(".admin_item").toggle();
    });
    layui.config({
        base: './' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
     
    $(".leftSide li").click(function(){
        var href=$(this).attr("name");
        $(".layui-show iframe").attr("src",href);
        $(this).addClass('li_active');
        $(this).siblings().removeClass('li_active');
    })
    </script>
</body>

</html>